<template>
	<view class="content">
		<view class="box">
			<image src="../../static/house4.jpg" mode="widthFix" class="banner"></image>
			<view class="info-box">
				<text class="price">{{detailsData.price}} 元/月</text>
				<text class="name">{{detailsData.name}}</text>
				<text class="address">{{detailsData.address}}</text>
				<view class="info">
					<view class="item">
						<text class="item-value">{{detailsData.houseType}}</text>
						<text class="item-name">房型</text>
					</view>
					<view class="item">
						<text class="item-value">{{detailsData.area}}</text>
						<text class="item-name">面积</text>
					</view>
					<view class="item">
						<text class="item-value">{{renovationList[detailsData.renovation]}}</text>
						<text class="item-name">装修</text>
					</view>
					<view class="item">
						<text class="item-value">{{detailsData.floor}}楼</text>
						<text class="item-name">楼层</text>
					</view>
				</view>
				<view class="btn-box">
					<u-button type="primary" shape="circle" text="立即租赁" @click="formShow=true"></u-button>
					<u-button v-if="isShow" type="primary" shape="circle" text="立即预约" @click="formShow=true"
						style="margin-left: 40rpx;"></u-button>
				</view>
			</view>
		</view>
		<u-popup :show="formShow" @close="formShow=false">
			<view class="popup-content">
				<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="100">
					<u-form-item v-if="!isShow" label="上传合同" prop="contractImg" borderBottom ref="item1">
						<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple
							:maxCount="1"></u-upload>
					</u-form-item>
					<u-form-item v-if="!isShow" label="租赁时间" prop="leaseTime" borderBottom ref="item1">
						<u--input v-model="formData.leaseTime" border="none" placeholder="请输入租赁时间"></u--input>
					</u-form-item>
					<u-form-item v-if="!isShow" label="缴费金额" prop="payAmount" borderBottom ref="item1">
						<u--input v-model="formData.payAmount" border="none" placeholder="请输入缴费金额"></u--input>
					</u-form-item>
					<u-form-item v-if="!isShow" label="应缴时间" prop="payableTime" borderBottom ref="item1"
						@click="payableShow=true">
						<u--input v-model="formData.payableTime" disabled border="none" disabledColor="#ffffff"
							placeholder="请选择应缴时间"></u--input>
					</u-form-item>
					<u-form-item v-if="!isShow" label="实缴时间" prop="paidInTime" borderBottom ref="item1"
						@click="paidInShow=true">
						<u--input v-model="formData.paidInTime" disabled border="none" disabledColor="#ffffff"
							placeholder="请选择实缴时间"></u--input>
					</u-form-item>
					<u-form-item v-if="isShow" label="预约时间" prop="reservationTime" borderBottom ref="item1"
						@click="reservationShow=true">
						<u--input v-model="formData.reservationTime" disabled border="none" disabledColor="#ffffff"
							placeholder="请选择预约时间"></u--input>
					</u-form-item>
					<u-button type="primary" v-if="!isShow" shape="circle" text="提交" @click="addLeasingInformation"
						class="btn"></u-button>
					<u-button type="primary" v-if="isShow" shape="circle" text="提交" @click="addReservation"
						class="btn"></u-button>
				</u--form>
			</view>
		</u-popup>
		<!-- 应缴时间 -->
		<u-datetime-picker :formatter="formatter" :show="payableShow" v-model="payableTime" mode="datetime"
			@confirm="payableConfirm" closeOnClickOverlay @cancel="payableShow=false" @close="payableShow=false"
			:minDate="minDate"></u-datetime-picker>
		<!-- 实缴时间 -->
		<u-datetime-picker :formatter="formatter" :show="paidInShow" v-model="paidInTime" mode="datetime"
			@confirm="paidInConfirm" closeOnClickOverlay @cancel="paidInShow=false" @close="paidInShow=false"
			:minDate="minDate"></u-datetime-picker>
		<!-- 预约时间 -->
		<u-datetime-picker :formatter="formatter" :show="reservationShow" v-model="reservationTime" mode="datetime"
			@confirm="reservationConfirm" closeOnClickOverlay @cancel="reservationShow=false"
			@close="reservationShow=false" :minDate="minDate"></u-datetime-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				detailsData: {},
				renovationList: ["毛坯", "精装修", "简装修"],
				formShow: false,
				formData: {
					leaseTime: '',
					payAmount: '',
					rentState: '',
					payableTime: '',
					paidInTime: '',
				},
				fileList: [],
				//应缴时间选择弹窗
				payableShow: false,
				payableTime: '',
				//实缴时间选择弹窗
				paidInShow: false,
				paidInTime: '',
				//预约时间选择弹窗
				reservationShow: false,
				reservationTime: '',
				minDate: 0,
				rules: {
					'leaseTime': {
						type: 'string',
						required: true,
						message: '请输入租赁时间',
						trigger: ['blur', 'change']
					},
					'payAmount': {
						type: 'string',
						required: true,
						message: '请输入缴费金额',
						trigger: ['blur', 'change']
					},
					'payableTime': {
						type: 'string',
						required: true,
						message: '请选择应缴时间',
						trigger: ['blur', 'change']
					},
					'paidInTime': {
						type: 'string',
						required: true,
						message: '请选择实缴时间',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad(op) {
			// console.log(JSON.parse(op.data))
			this.detailsData = JSON.parse(op.data)
			if (op.page) {
				this.isShow = JSON.parse(op.page)
			} else {
				this.isShow = false
			}
			this.minDate = Date.parse(new Date());
		},
		methods: {
			//新建预约
			addReservation() {
				this.$refs.uForm.validate().then(r => {
					this.$api.addReservation({
						houserId: this.detailsData.id,
						houseName: this.detailsData.name, //房源名
						address: this.detailsData.address, //地址
						userId: uni.getStorageSync('user').id, //用户id
						userName: uni.getStorageSync('user').name, //用户名
						state: 0, // 状态(0:未看房；1：已看房）
						reservationTime: this.reservationTime
					}).then(res => {
						this.$refs.uToast.show({
							type: 'success',
							message: '预约成功！',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					})
				}).catch(errors => {
					console.log(errors)
					this.$refs.uToast.show({
						type: 'error',
						message: '请输入完整内容！',
					})
				})
			},
			//新建租赁
			addLeasingInformation() {
				this.$refs.uForm.validate().then(r => {
					this.$api.addLeasingInformation({
						houseId: this.detailsData.id, //房源id
						houseName: this.detailsData.name, //房源名
						address: this.detailsData.address, //地址
						tenantName: uni.getStorageSync('user').name, //租客名字
						tenantId: uni.getStorageSync('user').id, //租客id
						leaseTime: this.formData.leaseTime, //租赁时间
						leaseState: 1, //租赁状态
						payAmount: this.formData.payAmount, //缴费金额
						rentState: this.formData.rentState, //租金状态
						payableTime: this.payableTime, //应缴时间
						paidInTime: this.paidInTime, //实缴时间
						contractImg: this.fileList[0].url //合同
					}).then(res => {
						this.$refs.uToast.show({
							type: 'success',
							message: '提交成功！',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					})
				}).catch(errors => {
					console.log(errors)
					this.$refs.uToast.show({
						type: 'error',
						message: '请输入完整内容！',
					})
				})
			},
			//时间格式化
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}点`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			//应缴时间选取确认事件
			payableConfirm(res) {
				this.formData.payableTime = this.$formatDate.formatDate(res.value, 'yyyy-M-d H:m:s')
				this.payableShow = false
			},
			//实缴时间选取确认事件
			paidInConfirm(res) {
				this.formData.paidInTime = this.$formatDate.formatDate(res.value, 'yyyy-M-d H:m:s')
				this.paidInShow = false
			},
			//预约时间选取确认事件
			reservationConfirm(res) {
				this.formData.reservationTime = this.$formatDate.formatDate(res.value, 'yyyy-M-d H:m:s')
				this.reservationShow = false
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			//上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://43.139.235.169:8081/cos/upload',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							resolve(JSON.parse(res.data).resultObj)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;

		.box {
			position: relative;

			.banner {
				width: 100%;
			}

			.info-box {
				width: 100%;
				padding: 40rpx;
				box-sizing: border-box;
				border-radius: 40rpx;
				position: absolute;
				top: 96%;
				background-color: #fff;
				display: flex;
				flex-direction: column;

				.price {
					color: red;
					font-size: 44rpx;
				}

				.name {
					font-size: 38rpx;
					margin-top: 20rpx;
				}

				.address {
					font-size: 34rpx;
					margin-top: 20rpx;
				}

				.info {
					display: flex;
					align-items: center;
					margin-top: 40rpx;
					justify-content: space-between;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;

						.item-value {
							font-size: 34rpx;
						}

						.item-name {
							font-size: 28rpx;
							color: #c0c4cc;
						}
					}
				}

				.btn-box {
					display: flex;
					align-items: center;
					margin-top: 100rpx;
				}
			}
		}
	}

	.popup-content {
		padding: 40rpx;
	}

	.btn {
		margin: 40rpx 0;
	}
</style>